<template>
 <div id="DT">
     <div class="animation">
      <div class="title">
        <div @click="bgActive= 1,isShow = 1" :class="{bgActive:bgActive==1}"><span>新歌速递</span></div>
        <div  @click="bgActive= 2,isShow = 2" :class="{bgActive:bgActive==2}"><span>新碟上线</span></div>
      </div>
      <div class="title-NewMusic">
        <ul>
            <li v-for="(items,index) in NewMusicList" @click="NewMusic = items" :key="index">
                <span :class="{NewMusic:NewMusic == items}">{{items}}</span>
            </li>
            <ul class="right-title" v-show="isShow == 1">
                <li><span class="iconfont" >&#xe624;</span><span>播放全部</span></li>
                <li><span class="iconfont">&#xe727;</span><span>收藏全部</span></li>
            </ul>
            <ul class="right-title2" v-show="isShow == 2">
                <li><span @click="NewMusicR = 1"  :class="{activeTitle2:NewMusicR == 1}">推荐</span></li>
                <li><span  @click="NewMusicR = 2" :class="{activeTitle2:NewMusicR == 2}">全部</span></li>
            </ul>
        </ul>
      </div>
      <div class="content">
        <!-- 1展示新歌速递 -->
        <ul class="NewMusicLine1" v-show="isShow == 1">
            <li v-for="(items,index) in phListNewMusic" :key="index">
                <div class="left-NewMusic">
                    <div class="studio">
                         <span class="iconfont">&#xe60f;</span>
                    </div>
                    <span class="pm">{{items.pm}}</span>
                    <img :src="items.cover" alt="">
                    <span>{{items.name}}</span>
                    <span style="color: #818181;">({{items.alias}})</span>
                    <span class="grade">{{items.grade}}</span>
                </div>
                  <div class="concent-NewMusic">
                    <span class="singer">{{items.singer}}</span>
                    <span class="name">{{items.name}}</span>
                  </div>
                    <span class="time">{{items.time}}</span>
            </li>

        </ul>
        <div v-show="isShow==2">
            <!-- <NewMusic :data="listDataNewMusic"></NewMusic> -->
        <ul class="NewMusicLine2">
        <!-- DT电台选项卡  -->
        <li v-for="(items,index) in listDataNewMusic" :key="index">
            <div class="img-box">
                <img :src="items.cover" alt="">
                <div class="bf">
                    <span class="iconfont">&#xe60f;</span>
                </div>
            </div>
            <div>
                <p class="one"><span class="singer">{{items.title}}</span>
                    <span class="name">({{items.alias}})</span></p>
                <p class="two"><span class="name">{{items.singer}}</span></p>
            </div>
        </li>
       
    </ul>
        </div>
      </div>
</div>
</div>   
</template>
<script>

import NewMusic from '@/components/slotZbdtRecommed.vue'
import api from '../utils/api'
import Services from '../utils/Service'
export default {
    data() {
        return {
           bgActive:1,
           NewMusicList:['全部','华语','欧美','韩国','日本'],
           NewMusic:'全部',
           isShow:1,
           NewMusicR:1,
        //    新歌速递列表
           phListNewMusic:[
            // {
            //     pm:1,
            //     name:'Hug me(抱我)',
            //     grade:'SQ',
            //     singer:'蔡徐坤',
            //     time:'02:32',
            //     cover:require('../../public/homeImg/recommGd.jpg')
            // }
            ],
            listDataNewMusic:[
                
            //     {
            //         // 2 全球榜 3筛选歌手 4NewMUsic
            //     type:'4',
            //     id:'图片1',
            //     title:'不惧岁月|想在爱意随风起的时代和你慢慢来',
            //     index:'',
            //     popularity:'230万',
            //     "cover":require('../../public/homeImg/recommGd.jpg'),
            //     titleH1:'独家放送',
            // }
            
            
            ]
        }
    },
    components:{
            NewMusic
        },
    mounted() {
		this.newSong()
	},
    methods: {
        upData(value,index){
            this.upDataSx = value;
            this.active = index
        },
              async newSong(){
      let res = await Services(api.newsong);
      if(res.status == 200&&res.data.code==200){
         let getData= [...res.data.result]
      this.phListNewMusic = getData.map(function(item,index){
      return {
        //  pm:1,
            //     name:'Hug me(抱我)',
            //     grade:'SQ',
            //     singer:'蔡徐坤',
            //     time:'02:32',
            //     cover:require('../../public/homeImg/recommGd.jpg')
        name:getData[index].name,
        id:getData[index].id,
        cover:getData[index].picUrl,
        type:'3',
        singer:getData[index].song.artists[0].name,
        time:getData[index].song.album.playTime,
        alias:getData[index].song.alias[0]

      }
    })
    console.log(this.phListNewMusic)
     this.listDataNewMusic = getData.map(function(item,index){
      return {
         //     {
            //         // 2 全球榜 3筛选歌手 4NewMUsic
            //     type:'4',
            //     id:'图片1',
            //     title:'不惧岁月|想在爱意随风起的时代和你慢慢来',
            //     index:'',
            //     popularity:'230万',
            //     "cover":require('../../public/homeImg/recommGd.jpg'),
            //     titleH1:'独家放送',
            // }
        title:getData[index].name,
        id:getData[index].id,
        cover:getData[index].picUrl,
        type:'4',
        singer:getData[index].song.artists[0].name,
         alias:getData[index].song.alias[0]
      }
    })
     console.log(this.phListNewMusic)
      }else{
        console.log(res)
      }
    },
    },
}
</script>
<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.woff2?t=1657706050349') format('woff2'),
       url('../../public/font_home/iconfont.woff?t=1657706050349') format('woff'),
       url('../../public/font_home/iconfont.ttf?t=1657706050349') format('truetype');
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.ttf?t=1658501073558') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.animation{
        @media (min-width: 1100px) {
   width: 100%;
} 
@media (min-width: 1800px) {
    width: 95%;
} 
   
    margin: 0 auto;

    div,span,ul,li,img{
    font-size: 0;
}
.title{
    display: flex;
    width: 290px;
    border:1px solid #BBBBBB;
    box-sizing: border-box;
    border-radius: 17px;
    margin: 0 auto 30px auto;
    div{
        width: 50%;
        height: 38px;
        text-align: center;
        line-height: 38px;
        border-radius: 17px;
        cursor: pointer;
        span{
        font-size: 16px;
       
    }
    }
    .bgActive{
        background: #BBBBBB;
        color: white;
    }
}
.title-NewMusic{
   margin-bottom: 25px;
  
    .NewMusic{
        font-weight: 800;
    }
    ul{
        display: flex;
        position: relative;
        li{
            margin-right: 30px;
          
            span{
            font-size: 18px;
            color: #676767;
            cursor: pointer;
        }
        }
        .right-title{
            position: absolute !important;
            right: 0px !important;
             li:first-child{
             background: #f24e4e;

            }
            li:first-child:hover{
                 background: #EC4141;
            }
             li:nth-child(2){
                margin-left: 4px;
                
                border:solid 1px  #373737;
                span{
                    color: #373737;
                }
            }
            li{
                  padding: 4px 16px;
             
            margin-right: 15px;
            border-radius: 17px;
            span{
                color: white;
                font-size: 16px;
            }
           
            span:nth-child(2){
                margin-left: 4px;
              
            }
            }
        }
        .right-title2{
            position: absolute !important;
            right: 0px !important;
            li{
            padding: 4px 10px;
            margin-right: 5px;
            border-radius: 17px;
            span{
                color: #676767;
                font-size: 14px;
                padding: 2px 11px;
            }
           
            span:nth-child(2){
                margin-left: 4px;
              
            }
            .activeTitle2{
                background:#FDF5F5 ;
                color: #EC4141;
                
                 border-radius: 35%;
            }
            .activeTitle2:hover{
                color: #F03939 !important;
            }
            }
        }
        
    }
}

.content{
    .NewMusicLine2{
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;

        li{
                 box-sizing: border-box;
    width: calc(calc(100% / 5));
    overflow: hidden;
    padding-right: 20px;
    padding-top: 10px;
            p:first-child{
                display: grid;
                span{
                    font-size: 18px;
                    color: #222;
                }
                .name{
                    cursor: pointer;
                    color: #9F9F9F;
            }
            }
            p:last-child{
                margin-top: 10px;
                .name{
                    font-size: 16px;
                    color: #9F9F9F;
                    cursor: pointer;
            }
            .name:hover{
                    color: #676767;
            }
            }
            span{
                 color: #373737;
            font-size: 16px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            }
              .img-box:hover{.bf{
        display: flex;}
    }

            .img-box{
                position: relative;
                width: 100%;
                img{
                width: 100%;
                border-radius: 5px;
                cursor: pointer;
            }
            
            
                               .bf{
            
       position: absolute;
    top: 50%;
    width: 52px;
    height: 52px;
    left: 50%;
    transform: translate(-50%,-50%);
    display: none;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    align-items: center;
    text-align: center;
    justify-content: center;
    cursor: pointer;
    top: 50%;
            span{
                font-size: 30px;
                color: #EC4141;
                margin-top: 0px !important;

            }
        }
            }
 
        }

    }
    .NewMusicLine1{
        li:hover{
            background: #F0F1F2 !important ;
        }

        li{
            width: 100%;
            height: 100px;
            display: flex;
            align-items: center;
             span{
                font-size: 16px;
            }
            .singer,.name,.time{
                color: #818181;
            }
            .left-NewMusic{
                width: 45%;
                display: flex;
                position: relative;
                /* text-align: center; */
                /* justify-content: center; */
                align-items: center;
                span{
                    display: inline-block;
                    margin: 0 5px;
                }
                 .pm{
               display: inline-block;
                color: #C3C3DB;
                text-align: center;
            }
            img{
                width: 75px;
                height: 75px;
                border-radius: 5px;
            }
            .grade{
                    color: #EC5252 !important;
                    display: inline-block;
                    border: solid 1px #EC5252;
                    line-height: 14px;
                    padding: 0 1px;
            }
            .studio{
                position: absolute;
                top: 45%;
                width: 38px;
                height: 38px;
                left: 54px;
                transform: translate(-60%, -39%);
                display: flex;
                background-color: rgba(255, 255, 255, 0.8);
                border-radius: 50%;
                align-items: center;
                text-align: center;
                justify-content: center;
                cursor: pointer;
                  span{
                font-size: 20px;
                color: #EC4141;
                margin-top: 0px !important;
            }
            }
            }
           .concent-NewMusic{
                width: 40%;
                display: flex;
                span{
                    display: inline-block;
                    margin: 0 5px;
                    width: 50%;
                }
           }
           .time{
                width: 15%;
                    text-align: end;
                 margin-right: 15px;
            }
           
        }
        li:nth-child(2n-1){
            background: #F9F9F9;
        }
    }
}
}
</style>